<template>
  <div class="status-text">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
interface IProps {
  type?: 'info' | 'primary' | 'warning' | 'success' | 'danger'
}

const props = withDefaults(defineProps<IProps>(), {
  type: 'info'
})

const map = {
  info: '#454954',
  warning: '#ff6805',
  success: '#00b324',
  danger: '#f53f3f',
  primary: '#164CFF'
}

const color = computed(() => map[props.type])
</script>

<style scoped lang="scss">
.status-text {
  @apply text-[14px];

  color: v-bind(color);
}
</style>
